<template>
  <div class="w-100 h-100 flex Boty">
    <div ref="had" class="head">
      <div class="h-100 w-98 mauto">
        <div class="w-100 ws flexLeft Text">通道信息</div>
        <div class="w-100">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#F5F5F5', color: '#555555' }"
            :height="hed - 100"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column align="center" label="通道编码" width="auto">
              <template slot-scope="scope">
                {{ scope.row.channelId }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="通道名称" width="auto">
              <template slot-scope="scope">
                {{ scope.row.channelName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="通道费率" width="auto">
              <template slot-scope="scope">
                {{ scope.row.poundage + "%" }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="结算方式" width="auto">
              <template slot-scope="scope">
                {{ scope.row.settlementTypeName }}
              </template>
            </el-table-column>
            <div slot="empty" class="empty">
              <el-empty description="暂无数据"></el-empty>
            </div>
          </el-table>
        </div>
        <!--        底部分页-->
        <div class="w-100 ws flexRight">
          <el-pagination
            :current-page.sync="form.pageIndex"
            :page-size="form.pageSize"
            :total="Number(Total)"
            background
            layout="total, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { channeList } from "@/assets/js/homePage";

export default {
  data() {
    return {
      Total: 0,
      hed: 0,
      tableData: [],
      form: {
        pageIndex: 1,
        pageSize: 20,
      },
    };
  },
  mounted() {
    this.hed = this.$refs.had.offsetHeight;
    this.chanList(this.form.pageIndex, this.form.pageSize);
  },
  methods: {
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.chanList(this.form.pageIndex, this.form.pageSize);
    },
    handleCurrentChange(val) {
      console.log(val);
      this.form.pageIndex = val;
      this.chanList(this.form.pageIndex, this.form.pageSize);
    },
    async chanList(page, pageSize) {
      let res = await channeList({
        pageIndex: page,
        pageSize: pageSize,
      });
      if (res.code === 200) {
        this.tableData = res.data.data.records;
        this.Total = res.data.data.total;
      }
    },
  },
};
</script>
<style scoped>
.Boty {
  background: #eeeeee;
}

.head {
  background: #ffffff;
  height: 97%;
  width: 98%;
}

.Text {
  font-size: 14px;
  font-weight: bold;
}
</style>
